<template>
  <div class="home">
    <h2>渐变的fixed顶部栏</h2>
    <NavBar :title="'首页'" fixed @click-left="onLeftHandle"/>
    <div class="tab">
      <h3>左右联动的better-scroll</h3>
      <LinkageScroll/>
    </div>

    <div class="tab">
      <h3>横向滚动的scroll</h3>
      <TransverseScroll />
    </div>
    <div class="datepick">
      <h3>自定义日历</h3> 
      <DatePick v-model="now"/>
    </div>
    
    <h3>横向滑动取消收藏</h3>
    <SwiperCell />
    <h3>弹出层</h3>
    <button @click="show = true">点我显示</button>
    <OverLay :show="show" >
      <div class="warpper">
        <div class="lay">
          <div class="ele" v-for="i in 6" :key="i">{{i}}</div>
          <div @click="show = false">点我隐藏</div>
        </div>
      </div>
    </OverLay>

    <h3>tabs标签</h3>
    <TabLabel />

    <h3>ScrollMenu</h3>
    <ScrollMenu />
<<<<<<< HEAD
    <van-tabs v-model="active" scrollspy sticky>
      <van-tab v-for="index in 8" :title="'选项 ' + index" :key="index">
        内容 {{ index }}
      </van-tab>
    </van-tabs>
=======
    <h3>Carousel</h3>
    <Carousel/>
>>>>>>> f0d0f84c54bd3b6b68692c9a3e5b0c0dc6f5c900
  </div>
</template>
<script>
import {addCookie, setStore, getStore, setSession, getSession} from '@/utils/index'
import {reqCity} from '@/api/index'
import NavBar from '@/components/NavBar/index'
import LinkageScroll from '@/components/LinkageScroll/index'
import TransverseScroll from '@/components/TransverseScroll/index'
import DatePick from '@/components/dataPicker/index'
import SwiperCell from '@/components/swiperCell/index'
import OverLay from '@/components/OverLay/index'
import TabLabel from '@/components/TabLabel/index'
import Carousel from '@/components/Carousel/index'
import ScrollMenu from '@/components/ScrollMenu/index'

export default{
  data () {
    return {
      active:0,
      city:{},
      now: new Date(),
      show:false,
      menulist:[
        '菜单1','菜单2','菜单3'
      ],
      
    }
  },
  components:{
    NavBar,
    LinkageScroll,
    TransverseScroll,
    DatePick,
    SwiperCell,
    OverLay,
    TabLabel,
    Carousel,
    ScrollMenu
  },
  created() {

  },
  mounted () {

  },
  methods: {
    onLeftHandle () {
      console.log(123)
    },
    
  },
  watch:{
    //让OverLay的遮罩层下面的元素不随上面的内容滚动
    show(a){
      if(a){
        document.body.style.position = 'fixed'
      }else{
        document.body.style.position = 'static'
      }
    } 
  }

}
</script>
<style scoped>
.home {
  background-color: #f7f7f7;
  height: 100%;
  padding-top: 80px;
}
.tab {
  margin-top: 20px;
}
.datepick {
  height: 300px;
}
.warpper{
  height: 300px;
  width: 100%;
  position: fixed;
  overflow: auto;
  bottom: 0;
  left: 0;
  background-color: #fff;
}
.warpper .ele{
    height: 100px;
  }
.tabs ul {
  width: 100%;
  display: flex;
}
.tabs ul li{
  flex: 1;
  text-align: center;
  padding: 5px 0;
}
.btn-line{
 height: 2px;
 width: 30px;
 background-color: red;
 animation-name: hd; 
 animation-duration: 1s; 
 animation-iteration-count: 1; 
}
@keyframes hd {
  0%{
    width: 0; 
  }
  100%{
    width: 30px;
  }
}

</style>